<template>
  <div class="content">
    <tabsTop tabName="失效的券码"></tabsTop>
    <div v-if="couponArr.length > 0" class="coupon-content">
      <scroll-view>
        <div v-for="(item,index) in couponArr" :index="index" :key="index">
          <div class="row flex justify-center">
            <coupon :couponName="item.Coupon_Scheme_Name"
              :couponRule="item.Coupon_Scheme_Rule" :Min_Amount="item.Min_Amount"
              :Preferential="item.Preferential"></coupon>
          </div>
        </div>
      </scroll-view>
    </div>
    <!-- 无优惠券 -->
    <div v-else class="no-offers">
	  <div class="expired-coupon">
	    <div class="coupon-info">
	      <div class="coupon-details">
	        <div class="coupon-name">暂无失效优惠券码</div>
	      </div>
	    </div>
	  </div>
      <button class="browse-button">进店逛逛</button>
    </div>
    <div class="fixed-button shadow" @click="openPopup">兑换优惠码</div>
    <div v-if="popupVisible" class="popup-mask">
      <div class="popup">
        <div class="popup-header">
          <div></div>
          <span>兑换优惠码</span>
          <uni-icons @click="closePopup" type="closeempty" size="20"></uni-icons>
        </div>
        <div class="popup-content">
          <input v-model="exchangeCode" type="text" placeholder="请输入优惠码" />
        </div>
        <div class="popup-footer">
          <div class="popup-button" :disabled="exchangeCode === ''" @click="exchangeCoupon">兑换</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	const app = getApp();
	import {getmemberCouponAction} from "@/api/coupon.js";
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import coupon from "@/components/tool/coupon.vue"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			coupon
		},
		data() {
			return {
				popupVisible: false,
				exchangeCode: '',
				couponArr:[],
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			openPopup() {
				this.popupVisible = true;
			},
			closePopup() {
				this.popupVisible = false;
				this.exchangeCode = '';
			},
			exchangeCoupon() {
				// 实现兑换逻辑的代码
				console.log('兑换码：', this.exchangeCode);
				// 这里可以编写处理兑换逻辑的代码
				// 成功后关闭弹窗等操作
				this.closePopup();
			},
			async getData(){
				const res = await getmemberCouponAction({
					page: 1,
					limit: 10,
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					Type: 2,
				})
				if (res.Status == "success") {
					console.log('res',res);
					this.couponArr = res.tableData;
				}
			}
		}
	}
</script>

<style scoped>
	.expired-coupon {
	    display: flex;
	    align-items: center;
	    background-color: #f7f7f7;
	    border-radius: 8px;
	    /* padding: 15px; */
	    margin-bottom: 15px;
	  }
	
	  .coupon-info {
	    display: flex;
	    justify-content: space-between;
	    width: 100%;
	    align-items: center;
		height: 200rpx;
	  }
	
	  .coupon-details {
	    /* flex: 1; */
	    display: flex;
		justify-content: center;
		justify-items: center;
	    flex-direction: column;
		width: 25%;
		background: #C3C3C3;
		height: 100%;
		position: relative;
		padding-right: 20px; /* 为了给波浪形状留出空间 */
		overflow: hidden;
	  }
	  .coupon-details::after {
	      content: '';
	      position: absolute;
	      top: 0;
	      right: 0;
	      width: 5px; /* 波浪的宽度 */
	      height: 100%;
	      background: linear-gradient(to bottom, transparent 70%, #f7f7f7 70%);
	      background-size: 100% 8px; /* 控制波浪高度 */
	  }
	  .coupon-name {
	    font-size: 14px;
	    color: #818181;
	    margin-bottom: 5px;
	  }
	  .coupon-expiry {
	    font-size: 12px;
	    color: #888;
	  }
  .content {
    padding: 20px;
  }

  .coupon-content scroll-view {
    min-height: 400px;
  }

  .row {
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }

  .no-offers {
    text-align: center;
    margin-top: 50px;
  }

  .no-offers-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
  }

  .browse-button {
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #ff5252;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .browse-button:hover {
    background-color: #ff5252;
    color: #fff;
  }

  .fixed-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 30px;
    background-color: #ff5252;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .fixed-button:hover {
    background-color: #ff7675;
  }

  .popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .popup {
    width: 80%;
    max-width: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .popup-header {
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .popup-content {
    padding: 12px;
  }

  .popup-footer {
    padding: 12px;
    text-align: center;
  }

  input {
    /* width: 100%; */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f8f9fa;
    margin-bottom: 10px;
  }

  .popup-button {
    padding: 10px 20px;
    background-color: #ff5252;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .popup-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }

  button:focus,
  input:focus {
    outline: none;
  }
  .expired-coupon .coupon-expiry {
    font-size: 12px;
    color: #ff5252;
  }
  	@media (max-width: 480px) {
  		.lapse {
  			  position: absolute;
  			  right: 20px;
  			display: flex;
  			justify-content: end;
  			margin-bottom: 0px;
  			margin-top: 30px;
  		  font-size: 12px;
  		  color: #666;
  		  cursor: pointer;
  		}
  	}
  /* PC */
  @media (min-width: 768px) {
    .content {
      max-width: 800px;
      margin: 0 auto;
    }
  	.coupon-info {
  	  display: flex;
  	  justify-content: space-between;
  	  width: 100%;
  	  align-items: center;
  		height: 400rpx;
  	}
  	.lapse {
  		display: flex;
  		justify-content: end;
  		margin-bottom: 0px;
  		margin-top: 30px;
  	  font-size: 12px;
  	  color: #666;
  	  cursor: pointer;
  	}
  	
  }
</style>